﻿<link rel="stylesheet" type="text/css" href="/Content/FileUpload/jquery.fileupload-ui.css" />
<script type="text/javascript" src="/Content/FileUpload/tmpl.min.js"></script>
<script type="text/javascript" src="/Content/FileUpload/canvas-to-blob.min.js"></script>
<script type="text/javascript" src="/Content/FileUpload/load-image.min.js"></script>
<script type="text/javascript" src="/Content/FileUpload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/Content/FileUpload/jquery.fileupload.js"></script>
<script type="text/javascript" src="/Content/FileUpload/jquery.fileupload-ip.js"></script>
<script type="text/javascript" src="/Content/FileUpload/jquery.fileupload-ui.js"></script>
<script type="text/javascript" src="/Content/FileUpload/locale.js"></script>
@model IReklamo.HomePageModel
<div id="divComplaint" style="width: 240px; border-radius: 5px 0 0 5px; box-shadow: 1px 1px 3px #B4AAA0;
    padding: 20px; background: none repeat scroll 0 0 #F0EEE4; margin: auto">
    <div id="divLoading" style="height: 0px; width: 0px;">
    </div>
    <div id="progress">
        <div class="bar" style="width: 0%;">
        </div>
    </div>
    <form id="fileupload" action="/Models/Upload/ComplaintUploadHandler.ashx" method="POST"
    enctype="multipart/form-data">
    <div style="margin: 5px 0px 5px 0;">
        <div class="files" data-toggle="modal-gallery" data-target="#modal-gallery">
        </div>
    </div>
    <div id="divInputControls">
        <div class="fileupload-buttonbar">
            <div class="btn btn-success fileinput-button">
                <i class="icon-plus icon-white"></i><span>Add photo...</span>
                <input type="file" name="files[]" multiple>
            </div>
            <div style="clear: both">
                <br />@Html.TextBox("txtTitle", "", new { placeholder = "Short title here...", style = "width:240px;" })
                <br />@Html.TextBox("txtComplainee", "", new { placeholder = "Complainee here...", style = "width:240px;" })
                <br />@Html.TextArea("txtComment", new { rows = "5", placeholder = "Narration here...", style = "width:240px;" })
            </div>
            <button type="button" class="btn btn-primary start">
                <i class="icon-upload icon-white"></i><span>Submit Complaint</span>
            </button>
        </div>
    </div>
    </form>
    <div id="divSuccess" hidden>
        Contratulations, your complaint has been posted!
        <button type="button" id="addAnother">
            <span>Complain another</span>
        </button>
    </div>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <div class="template-upload fade" style="display:inline-block;margin:2px;">
        <div class="preview"><span class="fade"></span></div>
        {% if (file.error) { %}
            <div class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</div>
        {% } else if (o.files.valid && !i) { %}
            <div class="start" style="display:none"><button></button></div>
        {% } %}
        <div class="cancel" style="text-align:center">{% if (!i) { %}
            <button class="btn btn-warning" style="font-size:x-small;padding:1px;">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</div>
    </div>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <div class="template-download fade" style="display:inline-block">
        {% if (file.error) { %}
            <div></div>
            <div class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</div>
        {% } else { %}
            <div>
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}" style="max-width:80px;"></a>
            </div>
        {% } %}
    </div>
{% } %}
</script>
<script type="text/javascript">
$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload();
    $('#fileupload').fileupload('option', {
        maxFileSize: 500000000,
        resizeMaxWidth: 1920,
        resizeMaxHeight: 1200,
        singleFileUploads: true,
        multipart: true,
    });
    $('#fileupload').bind('fileuploadsubmit', function (e, data) {
        data.formData = { id: window.sessionStorage.getItem('complaintId') };
    });
    $('.btn-primary').click(function () {
        var divComplaint = $("#divComplaint");
        $("#divLoading").css("height", divComplaint.css("height"));
        $("#divLoading").css("width", divComplaint.css("width"));
        $("#divLoading").spin("small");
        $("form").hide();

        $('div#divInputControls').hide();
        $.ajax({
            url: '/Complaints/CreateComplaint',
            data: {
                createComplaintId: window.sessionStorage.getItem('createComplaintId'),
                title: $("#txtTitle").val(),
                complainee: $("#txtComplainee").val(),
                comment: $("#txtComment").val()
            }
        }).done(function (result) {
            $("#divLoading").hide();
            $("form").show();
            $("div#divInputControls").hide();
            window.sessionStorage.setItem('complaintId', result.complaintId)
            $('#fileupload').fileupload('option', 
            { stopped : function(){
                    $.post("/complaints/broadcastcomplaint", { complaintId : result.complaintId });
                }
            });
            $('#fileupload').fileupload('submit');
            $("div#divSuccess").show();
        });
    })

    $("#addAnother").click(function (sender, args) {
        $("#txtTitle").val("");
        $("#txtComplainee").val("");
        $("#txtComment").val("");
        $("div.files").html("");
        $("div#divSuccess").hide();
        $("div#divInputControls").show();
        $("#txtTitle").focus();
    });
});
</script>
